Можно ли переключить видимость элемента с помощью функций .hide (), .show () или .toggle ()?
Как бы вы проверили, является ли элемент видимым или скрытым?
2020-12-07 21:54:19
1
2
следующий
Поскольку вопрос относится к одному элементу, этот код может быть более подходящим:
// Проверяет содержимое CSS для отображения: [none | block], игнорирует видимость: [true | false]
$ (элемент) .is (": видимый");
// То же самое работает со скрытыми
$ (элемент) .is (": скрыто");
Это то же самое, что и предложение twernt, но применяется к одному элементу; и он соответствует алгоритму, рекомендованному в FAQ по jQuery.
Мы используем is () jQuery для проверки выбранного элемента с другим элементом, селектором или любым объектом jQuery. Этот метод просматривает элементы DOM, чтобы найти совпадение, удовлетворяющее переданному параметру. Он вернет true, если есть совпадение, в противном случае вернет false.
|
Вы можете использовать скрытый селектор:
// Соответствует всем скрытым элементам
$ ('элемент: скрытый')
И видимый селектор:
// Соответствует всем видимым элементам
$ ('элемент: видимый')
|
if ($ (element) .css ('display') == 'none' || $ (element) .css ("visibility") == "hidden") {
// 'элемент' скрыт
}
Вышеупомянутый метод не учитывает видимость родителя. Чтобы рассмотреть и родительский объект, вы должны использовать .is (": hidden") или .is (": visible").
Например,
Div2
Вышеупомянутый метод будет считать div2 видимым, а: visible - нет. Но приведенное выше может быть полезно во многих случаях, особенно когда вам нужно выяснить, есть ли какие-либо блоки ошибок, видимые в скрытом родительском элементе, потому что в таких условиях: visible не будет работать.
|
Ни один из этих ответов не касается того, что я понимаю как вопрос, который я искал: «Как мне обрабатывать элементы, которые имеют видимость: скрытые?». Ни: visible, ни: hidden не справятся с этим, так как они оба ищут отображение в соответствии с документацией. Насколько я мог определить, нет селектора для обработки видимости CSS. Вот как я решил это (стандартные селекторы jQuery, может быть более сжатый синтаксис):
$ (". item"). each (function () {
if ($ (this) .css ("visibility") == "hidden") {
// обрабатываем невидимое состояние
} else {
// обрабатываем видимое состояние
}
});
|
Как определить состояние переключенного элемента?
Вы можете определить, свернут ли элемент или нет, используя селекторы: visible и: hidden.
var isVisible = $ ('# myDiv'). is (': visible');
var isHidden = $ ('# myDiv'). is (': hidden');
Если вы просто воздействуете на элемент на основе его видимости, вы можете просто включить: visible или: hidden в выражение селектора. Например:
$ ('# myDiv: visible'). animate ({left: '+ = 200px'}, 'медленно');
|
Часто, проверяя, видно ли что-то или нет, вы сразу же идете дальше и делаете с этим что-то еще. Цепочка jQuery упрощает это.
Итак, если у вас есть селектор, и вы хотите выполнить какое-либо действие с ним, только если он виден или скрыт, вы можете использовать filter (": visible") или filter (": hidden"), а затем связать его с действием, которое вы хотите взять.
Итак, вместо оператора if, например:
if ($ ('# btnUpdate'). is (": visible"))
{
$ ('# btnUpdate'). animate ({width: "toggle"}); // Скрыть кнопку
}
Или эффективнее, но еще хуже:
var button = $ ('# btnUpdate');
если (button.is (": видимый"))
{
button.animate ({ширина: "переключатель"}); // Скрыть кнопку
}
Все это можно сделать одной строкой:
$ ('# btnUpdate'). filter (": visible"). animate ({width: "toggle"});
|
Селектор: visible согласно документации jQuery:
У них нет отображаемого значения CSS.
Это элементы формы с type = "hidden".
Их ширина и высота явно равны 0.
Элемент-предок скрыт, поэтому элемент не отображается на странице.
Элементы с видимостью: скрытый или непрозрачность: 0 считаются видимыми, поскольку они по-прежнему занимают место в макете.
Это полезно в некоторых случаях и бесполезно в других, потому что, если вы хотите проверить, является ли элемент видимым (display! = None), игнорируя видимость родителей, вы обнаружите, что выполнение .css ("display") == 'none 'не только быстрее, но и корректно вернет проверку видимости.
Если вы хотите проверить видимость вместо отображения, вы должны использовать: .css ("visibility") == "hidden".
Также примите во внимание дополнительные примечания jQuery:
Поскольку: visible является расширением jQuery и не является частью спецификации CSS, запросы, использующие: visible, не могут воспользоваться преимуществом повышения производительности, обеспечиваемого собственным методом DOM querySelectorAll (). Чтобы добиться максимальной производительности при использовании: visible для выбора элементов, сначала выберите элементы с помощью селектора на чистом CSS, а затем используйте .filter (": visible").
Кроме того, если вас беспокоит производительность, вы должны проверить «Теперь вы видите меня… показать / скрыть производительность» (2010-05-04). И используйте другие методы для отображения и скрытия элементов.
|
Это работает для меня, и я использую show () и hide (), чтобы сделать мой div скрытым / видимым:
if ($ (this) .css ('display') == 'none') {
/ * ваш код находится здесь * /
} else {
/ * альтернативная логика * /
}
|
Как работает видимость элементов и jQuery;
Элемент может быть скрыт с помощью display: none,видимость: скрытая или непрозрачность: 0. Разница между этими методами:
display: none скрывает элемент и не занимает места;
видимость: скрытый скрывает элемент, но по-прежнему занимает место в макете;
opacity: 0 скрывает элемент как «visibility: hidden», и он по-прежнему занимает место в макете; единственная разница в том, что непрозрачность позволяет сделать элемент частично прозрачным;
if ($ ('. target'). is (': hidden')) {
$ ('. цель'). шоу ();
} else {
$ ('. цель'). hide ();
}
if ($ ('. target'). is (': visible')) {
$ ('. цель'). hide ();
} else {
$ ('. цель'). шоу ();
}
if ($ ('. target-visibility'). css ('visibility') == 'hidden') {
$ ('. target-visibility'). css ({
видимость: "видимый",
дисплей: ""
});
} else {
$ ('. target-visibility'). css ({
видимость: «скрытая»,
дисплей: ""
});
}
if ($ ('. target-visibility'). css ('opacity') == "0") {
$ ('. target-visibility'). css ({
непрозрачность: «1»,
дисплей: ""
});
} else {
$ ('. target-visibility'). css ({
непрозрачность: «0»,
дисплей: ""
});
}
Полезные методы переключения jQuery:
$ ('. click'). click (function () {
$ ('. цель'). toggle ();
});
$ ('. click'). click (function () {
$ ('. цель'). slideToggle ();
});
$ ('. click'). click (function () {
$ ('. цель'). fadeToggle ();
});
|
Вы также можете сделать это с помощью обычного JavaScript:
function isRendered (domObj) {
if ((domObj.nodeType! = 1) || (domObj == document.body)) {
вернуть истину;
}
if (domObj.currentStyle && domObj.currentStyle ["display"]! = "none" && domObj.currentStyle ["visibility"]! = "hidden") {
return isRendered (domObj.parentNode);
} else if (window.getComputedStyle) {
var cs = document.defaultView.getComputedStyle (domObj, null);
if (cs.getPropertyValue ("display")! = "none" && cs.getPropertyValue ("visibility")! = "hidden") {
return isRendered (domObj.parentNode);
}
}
вернуть ложь;
}
Примечания:
Работает везде
Работает для вложенных элементов
Работает с CSS и встроенными стилями
Не требует каркаса
|
Я бы использовал класс CSS .hide {display: none! Important; }.
Для скрытия / отображения я вызываю .addClass ("hide") /. RemoveClass ("hide"). Для проверки видимости я использую .hasClass ("hide").
Это простой и понятный способ проверять / скрывать / отображать элементы, если вы не планируете использовать методы .toggle () или .animate ().
|
Демо ссылка
$ ('# clickme'). click (function () {
$ ('# книга'). toggle ('slow', function () {
// Анимация завершена.
alert ($ ('# книга'). is (": visible")); // <--- TRUE, если Visible False, если скрыт
});
});
кликните сюда
Источник:
Blogger Plug n Play - инструменты и виджеты jQuery: как узнать, является ли элемент скрытым или видимым с помощью jQuery
|
Можно просто использовать скрытый или видимый атрибут, например:
$ ('элемент: скрытый')
$ ('элемент: видимый')
Или вы можете упростить то же самое следующим образом.
$ (элемент) .is (": видимый")
|
ebdiv должен быть установлен в style = "display: none;". Он работает как для отображения, так и для скрытия:
$ (документ) .ready (функция () {
$ ("# eb"). click (function () {
$ ("# ebdiv"). toggle ();
});
});
|
Другой ответ, который вы должны принять во внимание: если вы скрываете элемент, вы должны использовать jQuery, но вместо того, чтобы скрывать его, вы удаляете весь элемент, но вы копируете его HTML-содержимое и сам тег в переменную jQuery, а затем все, что вам нужно сделать, это проверить, есть ли такой тег на экране, используя обычный if (! $ ('# thetagname'). length).
|
При тестировании элемента по сравнению с селектором: hidden в jQuery следует учитывать, что элемент с абсолютным позиционированием может быть распознан как скрытый, хотя их дочерние элементы видны.
Во-первых, это кажется несколько нелогичным - хотя более внимательное рассмотрение документации jQuery дает соответствующую информацию:
Элементы можно считать скрытыми по нескольким причинам: [...] Их ширина и высота явно равны 0. [...]
Таким образом, это действительно имеет смысл в отношении блочной модели и вычисленного стиля для элемента. Даже если ширина и высота не установлены явно на 0, они могут быть установлены неявно.
Взгляните на следующий пример:
console.log ($ ('. foo'). is (': hidden')); // правда
console.log ($ ('. bar'). is (': hidden')); // ложный
.foo {
позиция: абсолютная;
слева: 10 пикселей;
верх: 10 пикселей;
фон: # ff0000;
}
.бар {
позиция: абсолютная;
слева: 10 пикселей;
верх: 10 пикселей;
ширина: 20 пикселей;
высота: 20 пикселей;
фон: # 0000ff;
}
Обновление для jQuery 3.x:
С jQuery 3 описанное поведение изменится! Элементы будут считаться видимыми, если у них есть поля макета, в том числе с нулевой шириной и / или высотой.
JSFiddle с jQuery 3.0.0-alpha1:
http://jsfiddle.net/pM2q3/7/
Затем тот же код JavaScript будет иметь следующий вывод:
console.log ($ ('. foo'). is (': hidden')); // ложный
console.log ($ ('. bar'). is (': hidden'));// ложный
|
Это может сработать:
ожидать ($ ("# message_div"). css ("дисплей")). toBe ("нет");
|
Пример:
$ (документ) .ready (функция () {
if ($ ("# checkme: hidden"). length) {
console.log («Скрытый»);
}
});
|
Чтобы проверить, не видно ли, я использую!:
if (! $ ('# book'). is (': visible')) {
alert ('# книга не отображается')
}
Или следующее - это тоже sam, сохраняющий селектор jQuery в переменной, чтобы повысить производительность, когда он вам нужен несколько раз:
var $ book = $ ('# книга')
if (! $ book.is (': visible')) {
alert ('# книга не отображается')
}
|
Используйте переключение классов, а не редактирование стилей. . .
Использовать классы, предназначенные для «скрытия» элементов, несложно, а также это один из самых эффективных методов. Переключение класса «скрытый» со стилем отображения «none» будет работать быстрее, чем редактирование этого стиля напрямую. Я довольно подробно объяснил некоторые из этого в вопросе о переполнении стека. Как сделать два элемента видимыми / скрытыми в одном div.
Лучшие практики и оптимизация JavaScript
Вот поистине поучительный видеоролик Google Tech Talk, сделанный фронтенд-инженером Google Николасом Закасом:
Ускорьте свой Javascript (YouTube)
|
Пример использования видимой проверки для активированного блокировщика рекламы:
$ (документ) .ready (функция () {
if (! $ ("# ablockercheck"). is (": visible"))
$ ("# ablockermsg"). text ("Пожалуйста, отключите блокировщик рекламы."). show ();
});
ablockercheck - это идентификатор, который блокирует блокировщик рекламы. Поэтому, проверив его, если он виден, вы сможете определить, включен ли блокировщик рекламы.
|
В конце концов, ни один из примеров мне не подходит, поэтому я написал свой.
Тесты (без поддержки фильтра Internet Explorer: альфа):
а) Проверьте, не скрыт ли документ
б) Проверьте, имеет ли элемент нулевую ширину / высоту / непрозрачность или отображение: нет / видимость: скрыто во встроенных стилях
c) Проверьте, не скрыт ли центр (также потому, что это быстрее, чем тестирование каждого пикселя / угла) элемента другим элементом (и всеми предками, например: overflow: hidden / scroll / один элемент над другим) или краями экрана
г) Проверьте, имеет ли элемент нулевую ширину / высоту / непрозрачность или отображение: нет / видимость: скрыто в вычисленных стилях (среди всех предков)
Проверено на
Android 4.4 (собственный браузер / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (режимы документов Internet Explorer 5-11 + Internet Explorer 8 на виртуальная машина) и Safari (Windows / Mac / iOS).
var is_visible = (function () {
var x = window.pageXOffset? window.pageXOffset + window.innerWidth - 1: 0,
y = window.pageYOffset? window.pageYOffset + window.innerHeight - 1: 0,
relative = !! ((! x &&! y) ||! document.elementFromPoint (x, y));
функция внутри (дочерний, родительский) {
while (child) {
если (потомок === родитель) вернуть истину;
child = child.parentNode;
}
вернуть ложь;
};
return function (elem) {
если (
document.hidden ||
elem.offsetWidth == 0 ||
elem.offsetHeight == 0 ||
elem.style.visibility == 'скрытый' ||
elem.style.display == 'none' ||
elem.style.opacity === 0
) return false;
var rect = elem.getBoundingClientRect ();
if (relative) {
если (! внутри (document.elementFromPoint (rect.left + elem.offsetWidth / 2, rect.top + elem.offsetHeight / 2), elem)) return false;
} иначе, если (
! внутри (document.elementFromPoint (rect.left + elem.offsetWidth / 2 + window.pageXOffset, rect.top + elem.offsetHeight / 2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight / 2 <0 ||
rect.left + elem.offsetWidth / 2 <0 ||
rect.bottom - elem.offsetHeight / 2> (window.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth / 2> (window.innerWidth || document.documentElement.clientWidth)
)
) return false;
if (window.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = null;
while (el) {
if (el === document) {break;} else if (! el.parentNode) вернуть false;
comp = window.getComputedStyle? window.getComputedStyle (эль, ноль): el.currentStyle;
if (comp && (comp.visibility == 'hidden' || comp.display == 'none' || (typeof comp.opacity! == 'undefined' && comp.opacity! = 1))) return false;
el = el.parentNode;
}
}
вернуть истину;
}
}) ();
Как использовать:
is_visible (elem) // логическое
|
Вам нужно проверить как ... Отображение, так и видимость:
if ($ (this) .css ("display") == "none" || $ (this) .css ("visibility") == "hidden") {
// Элемент не виден
} else {
// Элемент виден
}
Если мы проверим $ (this) .is (": visible"), jQuery автоматически проверит обе эти вещи.
|
Может ты сможешь сделать что-то подобное
$ (документ) .ready (функция () {
var visible =$ ('# элемент'). is (': visible');
if (visible) {
предупреждение ("видимый");
// Код
}
еще
{
предупреждение («скрыто»);
}
});
Имя
|
Просто проверьте видимость, проверив логическое значение, например:
if (this.hidden === false) {
// Ваш код
}
Я использовал этот код для каждой функции. В противном случае вы можете использовать is (': visible') для проверки видимости элемента.
|
Поскольку элементы с visibility: hidden или opacity: 0 считаются видимыми, поскольку они по-прежнему занимают место в макете (как описано для jQuery: visible Selector), мы можем проверить, действительно ли элемент виден следующим образом:
function isElementReallyHidden (el) {
return $ (el) .is (": hidden") || $ (el) .css ("visibility") == "hidden" || $ (el) .css ('непрозрачность') == 0;
}
var booElementReallyShowed =! isElementReallyHidden (someEl);
$ (someEl) .parents (). each (function () {
if (isElementReallyHidden (это)) {
booElementReallyShowed = false;
}
});
|
Но что, если CSS этого элемента выглядит следующим образом?
.элемент{
позиция: абсолютная; слева: -9999;
}
Итак, этот ответ на вопрос о переполнении стека, как проверить, находится ли элемент за пределами экрана, также следует учитывать.
|
Функция может быть создана для проверки атрибутов видимости / отображения, чтобы оценить, отображается ли элемент в пользовательском интерфейсе или нет.
function checkUIElementVisible (element) {
return ((element.css ('display')! == 'none') && (element.css ('visibility')! == 'скрытый'));
}
Рабочая скрипка
|
Также вот тернарное условное выражение для проверки состояния элемента, а затем для его переключения:
$ ('someElement'). on ('click', function () {$ ('elementToToggle'). is (': visible')? $ ('elementToToggle'). hide ('slow'): $ ('elementToToggle ') .show (' медленно ');});
|
if ($ ('# postcode_div'). is (': visible')) {
if ($ ('# postcode_text'). val () == '') {
$ ('# spanPost'). текст ('\ u00a0');
} else {
$ ('# spanPost'). текст ($ ('# postcode_text'). val ());
}
|
1
2
следующий
Весьма активный вопрос. Заработайте 10 репутации, чтобы ответить на этот вопрос. Требование репутации помогает защитить этот вопрос от спама и отсутствия ответов.
Не тот ответ, который вы ищете? Просмотрите другие вопросы с метками javascript jquery dom visibility или задайте свой вопрос.
Источник:
Blogger Plug n Play - инструменты и виджеты jQuery: как узнать, является ли элемент скрытым или видимым с помощью jQuery
|
Можно просто использовать скрытый или видимый атрибут, например:
$ ('элемент: скрытый')
$ ('элемент: видимый')
Или вы можете упростить то же самое следующим образом.
$ (элемент) .is (": видимый")
|
ebdiv должен быть установлен в style = "display: none;". Он работает как для отображения, так и для скрытия:
$ (документ) .ready (функция () {
$ ("# eb"). click (function () {
$ ("# ebdiv"). toggle ();
});
});
|
Другой ответ, который вы должны принять во внимание: если вы скрываете элемент, вы должны использовать jQuery, но вместо того, чтобы скрывать его, вы удаляете весь элемент, но вы копируете его HTML-содержимое и сам тег в переменную jQuery, а затем все, что вам нужно сделать, это проверить, есть ли такой тег на экране, используя обычный if (! $ ('# thetagname'). length).
|
При тестировании элемента по сравнению с селектором: hidden в jQuery следует учитывать, что элемент с абсолютным позиционированием может быть распознан как скрытый, хотя их дочерние элементы видны.
Во-первых, это кажется несколько нелогичным - хотя более внимательное рассмотрение документации jQuery дает соответствующую информацию:
Элементы можно считать скрытыми по нескольким причинам: [...] Их ширина и высота явно равны 0. [...]
Таким образом, это действительно имеет смысл в отношении блочной модели и вычисленного стиля для элемента. Даже если ширина и высота не установлены явно на 0, они могут быть установлены неявно.
Взгляните на следующий пример:
console.log ($ ('. foo'). is (': hidden')); // правда
console.log ($ ('. bar'). is (': hidden')); // ложный
.foo {
позиция: абсолютная;
слева: 10 пикселей;
верх: 10 пикселей;
фон: # ff0000;
}
.бар {
позиция: абсолютная;
слева: 10 пикселей;
верх: 10 пикселей;
ширина: 20 пикселей;
высота: 20 пикселей;
фон: # 0000ff;
}
Обновление для jQuery 3.x:
С jQuery 3 описанное поведение изменится! Элементы будут считаться видимыми, если у них есть поля макета, в том числе с нулевой шириной и / или высотой.
JSFiddle с jQuery 3.0.0-alpha1:
http://jsfiddle.net/pM2q3/7/
Затем тот же код JavaScript будет иметь следующий вывод:
console.log ($ ('. foo'). is (': hidden')); // ложный
console.log ($ ('. bar'). is (': hidden'));// ложный
|
Это может сработать:
ожидать ($ ("# message_div"). css ("дисплей")). toBe ("нет");
|
Пример:
$ (документ) .ready (функция () {
if ($ ("# checkme: hidden"). length) {
console.log («Скрытый»);
}
});
|
Чтобы проверить, не видно ли, я использую!:
if (! $ ('# book'). is (': visible')) {
alert ('# книга не отображается')
}
Или следующее - это тоже sam, сохраняющий селектор jQuery в переменной, чтобы повысить производительность, когда он вам нужен несколько раз:
var $ book = $ ('# книга')
if (! $ book.is (': visible')) {
alert ('# книга не отображается')
}
|
Используйте переключение классов, а не редактирование стилей. . .
Использовать классы, предназначенные для «скрытия» элементов, несложно, а также это один из самых эффективных методов. Переключение класса «скрытый» со стилем отображения «none» будет работать быстрее, чем редактирование этого стиля напрямую. Я довольно подробно объяснил некоторые из этого в вопросе о переполнении стека. Как сделать два элемента видимыми / скрытыми в одном div.
Лучшие практики и оптимизация JavaScript
Вот поистине поучительный видеоролик Google Tech Talk, сделанный фронтенд-инженером Google Николасом Закасом:
Ускорьте свой Javascript (YouTube)
|
Пример использования видимой проверки для активированного блокировщика рекламы:
$ (документ) .ready (функция () {
if (! $ ("# ablockercheck"). is (": visible"))
$ ("# ablockermsg"). text ("Пожалуйста, отключите блокировщик рекламы."). show ();
});
ablockercheck - это идентификатор, который блокирует блокировщик рекламы. Поэтому, проверив его, если он виден, вы сможете определить, включен ли блокировщик рекламы.
|
В конце концов, ни один из примеров мне не подходит, поэтому я написал свой.
Тесты (без поддержки фильтра Internet Explorer: альфа):
а) Проверьте, не скрыт ли документ
б) Проверьте, имеет ли элемент нулевую ширину / высоту / непрозрачность или отображение: нет / видимость: скрыто во встроенных стилях
c) Проверьте, не скрыт ли центр (также потому, что это быстрее, чем тестирование каждого пикселя / угла) элемента другим элементом (и всеми предками, например: overflow: hidden / scroll / один элемент над другим) или краями экрана
г) Проверьте, имеет ли элемент нулевую ширину / высоту / непрозрачность или отображение: нет / видимость: скрыто в вычисленных стилях (среди всех предков)
Проверено на
Android 4.4 (собственный браузер / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac WebKit), Internet Explorer (режимы документов Internet Explorer 5-11 + Internet Explorer 8 на виртуальная машина) и Safari (Windows / Mac / iOS).
var is_visible = (function () {
var x = window.pageXOffset? window.pageXOffset + window.innerWidth - 1: 0,
y = window.pageYOffset? window.pageYOffset + window.innerHeight - 1: 0,
relative = !! ((! x &&! y) ||! document.elementFromPoint (x, y));
функция внутри (дочерний, родительский) {
while (child) {
если (потомок === родитель) вернуть истину;
child = child.parentNode;
}
вернуть ложь;
};
return function (elem) {
если (
document.hidden ||
elem.offsetWidth == 0 ||
elem.offsetHeight == 0 ||
elem.style.visibility == 'скрытый' ||
elem.style.display == 'none' ||
elem.style.opacity === 0
) return false;
var rect = elem.getBoundingClientRect ();
if (relative) {
если (! внутри (document.elementFromPoint (rect.left + elem.offsetWidth / 2, rect.top + elem.offsetHeight / 2), elem)) return false;
} иначе, если (
! внутри (document.elementFromPoint (rect.left + elem.offsetWidth / 2 + window.pageXOffset, rect.top + elem.offsetHeight / 2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight / 2 <0 ||
rect.left + elem.offsetWidth / 2 <0 ||
rect.bottom - elem.offsetHeight / 2> (window.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth / 2> (window.innerWidth || document.documentElement.clientWidth)
)
) return false;
if (window.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = null;
while (el) {
if (el === document) {break;} else if (! el.parentNode) вернуть false;
comp = window.getComputedStyle? window.getComputedStyle (эль, ноль): el.currentStyle;
if (comp && (comp.visibility == 'hidden' || comp.display == 'none' || (typeof comp.opacity! == 'undefined' && comp.opacity! = 1))) return false;
el = el.parentNode;
}
}
вернуть истину;
}
}) ();
Как использовать:
is_visible (elem) // логическое
|
Вам нужно проверить как ... Отображение, так и видимость:
if ($ (this) .css ("display") == "none" || $ (this) .css ("visibility") == "hidden") {
// Элемент не виден
} else {
// Элемент виден
}
Если мы проверим $ (this) .is (": visible"), jQuery автоматически проверит обе эти вещи.
|
Может ты сможешь сделать что-то подобное
$ (документ) .ready (функция () {
var visible =$ ('# элемент'). is (': visible');
if (visible) {
предупреждение ("видимый");
// Код
}
еще
{
предупреждение («скрыто»);
}
});
Имя
|
Просто проверьте видимость, проверив логическое значение, например:
if (this.hidden === false) {
// Ваш код
}
Я использовал этот код для каждой функции. В противном случае вы можете использовать is (': visible') для проверки видимости элемента.
|
Поскольку элементы с visibility: hidden или opacity: 0 считаются видимыми, поскольку они по-прежнему занимают место в макете (как описано для jQuery: visible Selector), мы можем проверить, действительно ли элемент виден следующим образом:
function isElementReallyHidden (el) {
return $ (el) .is (": hidden") || $ (el) .css ("visibility") == "hidden" || $ (el) .css ('непрозрачность') == 0;
}
var booElementReallyShowed =! isElementReallyHidden (someEl);
$ (someEl) .parents (). each (function () {
if (isElementReallyHidden (это)) {
booElementReallyShowed = false;
}
});
|
Но что, если CSS этого элемента выглядит следующим образом?
.элемент{
позиция: абсолютная; слева: -9999;
}
Итак, этот ответ на вопрос о переполнении стека, как проверить, находится ли элемент за пределами экрана, также следует учитывать.
|
Функция может быть создана для проверки атрибутов видимости / отображения, чтобы оценить, отображается ли элемент в пользовательском интерфейсе или нет.
function checkUIElementVisible (element) {
return ((element.css ('display')! == 'none') && (element.css ('visibility')! == 'скрытый'));
}
Рабочая скрипка
|
Также вот тернарное условное выражение для проверки состояния элемента, а затем для его переключения:
$ ('someElement'). on ('click', function () {$ ('elementToToggle'). is (': visible')? $ ('elementToToggle'). hide ('slow'): $ ('elementToToggle ') .show (' медленно ');});
|
if ($ ('# postcode_div'). is (': visible')) {
if ($ ('# postcode_text'). val () == '') {
$ ('# spanPost'). текст ('\ u00a0');
} else {
$ ('# spanPost'). текст ($ ('# postcode_text'). val ());
}
|
1
2
следующий
Весьма активный вопрос. Заработайте 10 репутации, чтобы ответить на этот вопрос. Требование репутации помогает защитить этот вопрос от спама и отсутствия ответов.
Не тот ответ, который вы ищете? Просмотрите другие вопросы с метками javascript jquery dom visibility или задайте свой вопрос.